﻿@page "/Scheduler/Templates/AppointmentTooltipTemplate"

<DemoPageSectionComponent Id="Scheduler-Templates-AppointmentTooltipTemplate">
    <DemoChildContent>
        <DxScheduler @bind-StartDate="@StartDate"
                     DataStorage="@DataStorage"
                     GroupType="SchedulerGroupType.Date" 
                     @bind-ShowAppointmentTooltip="@ShowAppointmentTooltip"
                     CssClass="demo-sc-size">
            <Views>
                <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true" CellMinWidth="120">
                    <HorizontalAppointmentTemplate>
                        @{
                            string backgroundCss = context.Resource == null ? "dxbl-purple-color" : context.Resource.BackgroundCssClass;
                        }
                        <div class="demo-sc-apt @(IsAccepted(context.Appointment) ? "demo-sc-accepted" : "")" style="width: 100%;">
                            <div class="card demo-apt-bg @backgroundCss" style="width: 100%;"></div>
                            <div class="card shadow-sm p-1 demo-sc-apt-content text-white" style="width:100%;">
                                @context.Appointment.Subject
                            </div>
                        </div>
                    </HorizontalAppointmentTemplate>
                    <VerticalAppointmentTemplate>
                        @{
                            string backgroundCss = context.Resource == null ? "dxbl-purple-color" : context.Resource.BackgroundCssClass;
                        }
                        <div class="shadow-sm demo-sc-apt @(IsAccepted(context.Appointment) ? "demo-sc-accepted"  : "")">
                            <div class="card demo-apt-bg @backgroundCss"></div>
                            <div class="card demo-sc-apt-content text-white">
                                <div class="card demo-sc-status-container">
                                    <div class="card demo-apt-status @backgroundCss"></div>
                                </div>
                                <div class="demo-apt-subject">
                                    @context.Appointment.Subject
                                </div>
                            </div>
                        </div>
                    </VerticalAppointmentTemplate>
                </DxSchedulerDayView>
            </Views>
            <AppointmentTooltipHeaderTemplate>
                <div class="tooltip-text-header">@context.Appointment.Subject</div>
                @if (IsAccepted(context.Appointment))
                {
                    <div style="margin-right: .3em;">(Accepted)</div>
                }
                <DxSchedulerShowAppointmentCompactFormButton></DxSchedulerShowAppointmentCompactFormButton>
                <DxSchedulerDeleteAppointmentButton></DxSchedulerDeleteAppointmentButton>
                <DxSchedulerCloseAppointmentButton></DxSchedulerCloseAppointmentButton>
            </AppointmentTooltipHeaderTemplate>
            <AppointmentTooltipTemplate>
                @{
                    string resourceCssClass = context.Resource == null ? "dxbl-purple-color" : context.Resource.BackgroundCssClass;
                    bool accepted = IsAccepted(context.Appointment);
                    string buttonText = accepted ? "Accepted" : "Tentative";
                    string iconCssClass = accepted ? "dx-icon-accepted" : "dx-icon-tentative";
                    string startDateTime = $"{context.Appointment.Start.ToString("ddd, MMM dd")}, {context.Appointment.Start.ToShortTimeString()} - {context.Appointment.End.ToShortTimeString()}";
                }
                <div class="container">
                    <div class="row mb-3">
                        <div class="col-auto ms-1">
                            <div class="dxbl-sc-label-item @resourceCssClass"></div>
                        </div>
                        <div class="col ps-0">
                            <span class="dxbl-sc-subject" style="vertical-align: middle;">
                                @context.Appointment.Subject
                            </span>
                            @if(context.Resource != null) {
                                <span class="dxbl-sc-subject" style="vertical-align: middle;">
                                    (@context.Resource.Caption)
                                </span>
                            }
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-auto ms-1">
                            <svg class="dx-icon-time dx-icon" role="img">
                                <use href="#dxsc-time-icon"></use>
                            </svg>
                        </div>
                        <div class="col ps-0"><span style="vertical-align: middle;">@startDateTime</span></div>
                    </div>
                    <hr />
                    <div class="sc-tooltip-bottom-container">
                        <DxButton Click="@(args => SwitchAccepted(context, args))" RenderStyleMode="ButtonRenderStyleMode.Text" RenderStyle="ButtonRenderStyle.Link"
                                    Text="@buttonText" IconCssClass="@iconCssClass">
                        </DxButton>
                    </div>
                </div>
            </AppointmentTooltipTemplate>
        </DxScheduler>
    </DemoChildContent>
    <OptionsContent>
        <OptionCheckBox @bind-Checked="@ShowAppointmentTooltip" Label="Show Appointment Tooltip" />
    </OptionsContent>


    @code {
        DateTime StartDate { get; set; } = DateTime.Today;
        bool ShowAppointmentTooltip { get; set; } = true;

        DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                Type = "AppointmentType",
                Start = "StartDate",
                End = "EndDate",
                Subject = "Caption",
                AllDay = "AllDay",
                Location = "Location",
                Description = "Description",
                LabelId = "Label",
                StatusId = "Status",
                RecurrenceInfo = "Recurrence",
                ResourceId = "ResourceId",
                CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                    new DxSchedulerCustomFieldMapping{ Name = "Accepted", Mapping = "Accepted" }
                }
            },
            ResourcesSource = ResourceCollection.GetResourcesForGrouping(),
            ResourceMappings = new DxSchedulerResourceMappings() {
                Id = "Id",
                Caption = "Name",
                BackgroundCssClass = "BackgroundCss",
                TextCssClass = "TextCss"
            }
        };

        bool IsAccepted(DxSchedulerAppointmentItem apt) => true == (bool?)apt.CustomFields["Accepted"];
        void SwitchAccepted(SchedulerAppointmentTooltipInfo tooltipInfo, MouseEventArgs mouseArgs) => tooltipInfo.CustomFields["Accepted"] = !IsAccepted(tooltipInfo.Appointment);

    }
</DemoPageSectionComponent>
